import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/components/app_permission/permission_widget.dart';
import 'package:yt_devops/components/yt_text_style.dart';
import 'package:yt_devops/pages/site/site_setting/site_setting_base_info/widgets/checkbox_widget.dart';
import 'package:yt_devops/pages/site/site_setting/site_setting_base_info/widgets/item_widget.dart';
import 'package:yt_devops/pages/site/site_setting/site_setting_base_info/widgets/remark_widget.dart';
import 'package:yt_devops/components/select_phone_widget.dart';
import 'package:yt_devops/resources/resources.dart';
import 'package:yt_devops/utils/constants/permission_page_constant.dart';
import 'package:yt_devops/utils/map_utils.dart';
import '../../../../components/app_bar/app_bar_widget.dart';
import '../../../../components/brn/brn_bottom_button_panel.dart';
import '../../../../components/gaps.dart';
import '../../../../resources/str_res_keys.dart';
import '../../../../styles/styles.dart';
import 'site_setting_base_info_controller.dart';

class SiteSettingBaseInfoPage extends GetView<SiteSettingBaseInfoController> {
  SiteSettingBaseInfoPage({Key? key}) : super(key: key);
  @override
  final controller = Get.put(SiteSettingBaseInfoController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SiteSettingBaseInfoController>(
        builder: (controller) => Stack(
              children: [
                Scaffold(
                  resizeToAvoidBottomInset: true,
                  appBar: AppBarWidget.withRightActions(
                    ResKey.siteDeviceAccessBaseInfo.tr,
                    actions: [
                       PermissionWidget(permissionStringList: const [PermissionConstant.homeSiteManageSettingBaseInfoEdit],
                            child: Visibility(
                                visible: !controller.isEnableEdit,
                                child:IconButton(
                          icon:
                          Image.asset(ImageAssets.siteSettingBaseInfoEdit),
                          onPressed: controller.edit,
                        )),
                      )
                    ],
                  ),
                  body: Container(
                    color: Colour.backgroundColor,
                    child: Column(
                      children: [
                        Expanded(
                          child: ListView(
                            children: [
                              Gaps.vGap10,
                              _topInfoWidget(context),
                              Gaps.vGap10,
                              _middleInfoWidget(),
                              Gaps.vGap10,
                      Container(
                        clipBehavior: Clip.hardEdge,
                        margin: const EdgeInsets.only(left: 16,right: 16),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                        child: RemarkWidget(
                                controller.remarkController,
                                (str) {
                                  controller.update();
                                },
                                isCanEdit: controller.isEnableEdit,
                              )),
                              Gaps.vGap10,
                      Container(
                        clipBehavior: Clip.hardEdge,
                        margin: const EdgeInsets.only(left: 16,right: 16),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.white,
                        ),
                        child:Column(
                          children: [
                            SelectPhotoWidget(
                                controller.logoString.isNotEmpty
                                    ? [controller.logoString]
                                    : [],
                                controller.isEnableEdit,
                                1,
                                decString:
                                ResKey.siteBaseInfoLimitPictures1.tr,
                                titleString: ResKey.siteBaseInfoSiteLogo.tr,
                                    (List<String> list) {
                                  if (list.isNotEmpty) {
                                    controller.logoString = list[0];
                                  } else {
                                    controller.logoString = '';
                                  }
                                  controller.update();
                                }),
                            const Divider(
                              color: Colour.dividerColor,
                              height: 1,
                            ),
                            SelectPhotoWidget(
                                titleString: ResKey.siteBaseInfoSitePhotos.tr,
                                controller.deviceImageList,
                                controller.isEnableEdit,
                                3, (List<String> list) {
                              controller.deviceImageList = list;
                              controller.update();
                            }),

                          ],
                        )),
                              Gaps.vGap16
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  bottomNavigationBar: Visibility(
                    visible: controller.isEnableEdit,
                    child: Container(
                      color: Colour.white,
                      padding: EdgeInsets.only(
                          bottom: ScreenUtil().bottomBarHeight + 5),
                      child: YtBrnBottomButtonPanel(
                          enableMainButton: controller.isCanSubmit,
                          mainButtonName: ResKey.save.tr,
                          mainButtonOnTap: () => controller.save(),
                          secondaryButtonName: ResKey.cancel.tr,
                          enableSecondaryButton: true,
                          secondaryButtonBorder:
                              Border.all(color: Colour.dividerColor),
                          secondaryButtonOnTap: () => controller.cancelEdit()),
                    ),
                  ),
                ),
                Visibility(
                  visible: controller.isShowInstalling,
                  child: CheckoutWidget(
                    controller.deviceInstallerList,
                    confirmCallBack: () {
                      controller.chooseInstaller();
                    },
                    hiddenCallBack: () {
                      controller.hiddenInstaller();
                    },
                    updateCallBack: () {
                      controller.checkoutCanCommit();
                      controller.update();
                    },
                  ),
                )
              ],
            ));
  }

  _topInfoWidget(BuildContext context) {
    return Container(
        clipBehavior: Clip.hardEdge,
        margin: const EdgeInsets.only(left: 16,right: 16),
    decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
    ),
    child: Column(
      children: [
        ItemWidget(
          controller.topTitleList[0],
          controller.installerController,
          isShowRight: controller.isEnableEdit && !controller.isOwner,
          isRequired: controller.isEnableEdit,
          hintString: ResKey.siteBaseInfoUnselected.tr,
          inputTextColor: controller.isOwner
              ? Colour.lightTextColor
              : Colour.otherTextColor,
          clickCallBack: controller.isEnableEdit
              ? () async {
                  FocusScope.of(context).unfocus();
                  if (!controller.isOwner) {
                    controller.showInstaller();
                  }
                }
              : () {},
        ),
        ItemWidget(
          controller.topTitleList[1],
          controller.siteNameController,
          isRequired: controller.isEnableEdit,
          isCanEdit: controller.isEnableEdit,
          textChangeCallBack: (text) {
            controller.checkoutCanCommit();
          },
        ),
        Visibility(
          visible: !controller.isEnableEdit,
          child: ItemWidget(
            controller.topTitleList[2],
            controller.timeController,
            isRequired: controller.isEnableEdit,
            isCanEdit: controller.isEnableEdit,
          ),
        ),
        ItemWidget(
          ResKey.mapType.tr,
          controller.mapController,
          isRequired: controller.isEnableEdit,
          hintString: ResKey.pleSelect.tr,
          isCanEdit: false,
          isShowRight: controller.isEnableEdit,
          clickCallBack: () {
            if (controller.isEnableEdit) {
              controller.chooseMapType(context);
            }
          },
        ),
        ItemWidget(
          controller.topTitleList[3],
          controller.siteAddressController,
          isRequired: controller.isEnableEdit,
          isShowRight: true,
          hintString: ResKey.siteBaseInfoUnselected.tr,
          maxLines: 2,
          isShowText: true,
          isShowDivider: false,
          rightImagePath: controller.isEnableEdit
              ? 'assets/images/site_base_info_location.png'
              : 'assets/images/site_base_info_navigator.png',
          clickCallBack: controller.isEnableEdit
              ? () {
                  controller.gotoMap();
                }
              : () {
                  MapUtils.chooseMap(
                    context,
                    address: controller.siteAddressController.text,
                    longitude: controller.longitude,
                    latitude: controller.latitude,
                  );
                },
        ),
      ],
    ));
  }

  _middleInfoWidget() {
    return Container(
        clipBehavior: Clip.hardEdge,
        margin: const EdgeInsets.only(left: 16,right: 16),
    decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
    ),
    child: Column(children: _getMiddleItems()));
  }

  _getMiddleItems() {
    List<Widget> items = [];
    for (int i = 0; i < controller.middleTitleList.length; i++) {
      items.add(_getItem(controller.middleTitleList[i],
          controller.middleControllerList[i], controller.middleUnitList[i]));
    }
    return items;
  }

  _getItem(
      String title, TextEditingController textController, String unitString) {
    return ItemWidget(
      title,
      textController,
      isCanEdit: controller.isEnableEdit,
      textInputType: const TextInputType.numberWithOptions(decimal: true),
      unitString: unitString,
      isShowDivider: false,
    );
  }
}
